<template>
  <view class="wrapper">
    <template v-for="item in textArr">
      <template v-if="item.type === 'text'" class="msg-reply-text">
        {{ item.value }}
      </template>
      <template class="icon" v-else-if="item.type === 'emoji'">
        <Icon
          :type="EMOJI_ICON_MAP_CONFIG[item.value]"
          :size="14"
          :iconStyle="{
            margin: '3px',
            verticalAlign: 'bottom',
            display: 'inline-block',
          }"
        />
      </template>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { EMOJI_ICON_MAP_CONFIG, emojiRegExp } from '../page/utils/emoji';
import { computed, defineProps, withDefaults } from '../page/utils/transformVue';
import Icon from './Icon.vue';

const props = withDefaults(defineProps<{ text: string }>(), {})

// 筛选出文本和表情
const parseText = (text: string) => {
  if (!text) return []
  const regexEmoji = emojiRegExp
  const matches: {
    type: 'emoji' | 'text'
    value: string
    index: number
  }[] = []
  let match

  while ((match = regexEmoji.exec(text)) !== null) {
    matches.push({
      type: 'emoji',
      value: match[0],
      index: match.index,
    })
    const fillText = ' '.repeat(match[0].length)
    text = text.replace(match[0], fillText)
  }

  text = text.replace(regexEmoji, ' ')

  if (text) {
    text
      .split(' ')
      .filter((item) => item.trim())
      .map((item) => {
        const index = text?.indexOf(item)
        matches.push({
          type: 'text',
          value: item,
          index,
        })
        const fillText = ' '.repeat(item.length)
        text = text.replace(item, fillText)
      })
  }

  return matches.sort((a, b) => a.index - b.index)
}

const textArr = computed(() => {
  return parseText(props.text)
})
</script>

<style lang="scss" scoped>
.wrapper {
  flex: 1;
  font-size: 26rpx;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.msg-reply-text {
  font-size: 26rpx !important;
  height: 36rpx;
  line-height: 36rpx;
  width: 100%;
  display: inline;
}
.ellipsis {
  display: inline-block;
  flex-basis: 48rpx;
  font-size: 26rpx;
}
</style>
